<template>
  <van-field
    v-if="h5"
    :model-value="modelValueText"
    :is-link="!isDetail"
    readonly
    :name="item.options && item.options.name"
    :label="item.options && item.options.label"
    :disabled="item.options && item.options.disabled"
    :placeholder="item.options && item.options.placeholder"
    :clearable="item.options && item.options.clearable"
    :required="item.options && !isDetail && item.options.required"
    :rules="isDetail ? [] : rules"
    :border="false"
    :label-align="(item.options && item.options.labelPosition) || undefined"
    :input-align="(item.options && item.options.inputAlign) || undefined"
    @click="onShowPicker"
  />
  <widget-form-item
    v-else
    :designer="designer"
    :widget-list="widgetList"
    :item="item"
    :rules="isDetail ? [] : rules"
    :index="index"
    :show-message="!isDetail"
  >
    <el-cascader
      v-if="!isDetail"
      v-model="fieldModel"
      style="flex: 1"
      :options="item.options.optionItems"
      :props="{ expandTrigger: 'hover' }"
      :disabled="item.options && item.options.disabled"
      :placeholder="item.options && item.options.placeholder"
      :clearable="item.options && item.options.clearable"
    />
    <div v-else>
      {{ modelValueText }}
    </div>
  </widget-form-item>
  <van-popup v-model:show="showPicker" round position="bottom">
    <van-cascader
      v-model="cascaderValue"
      :title="item.options.label"
      :options="item.options.optionItems"
      :field-names="fieldNames"
      @close="showPicker = false"
      @finish="onFinish"
    />
  </van-popup>
</template>

<script>
import { ref, computed } from 'vue'
import props from './props'
import field from './field'

export default {
  name: 'MCascader',
  props,
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const showPicker = ref(false)
    const cascaderValue = ref('')

    const fieldNames = {
      text: 'label',
      value: 'value',
      children: 'children'
    }

    // 递归查找部门路径函数
    const findDepartmentPath = (items, values) => {
      for (const item of items) {
        if (item.value === values[0]) {
          if (values.length === 1) {
            return item.label
          } else if (item.children) {
            const childPath = findDepartmentPath(item.children, values.slice(1))
            if (childPath) {
              return `${item.label} / ${childPath}`
            }
          }
        }
      }
      return ''
    }

    // H5 选中值展示
    const modelValueText = computed(() => {
      if (props.modelValue) {
        return findDepartmentPath(props.item.options.optionItems, props.modelValue)
      }
      return ''
    })

    const onShowPicker = () => {
      const { isDetail } = field(props, emit)
      if (!props.item.options.readonly && !props.item.options.disabled && !isDetail.value) {
        showPicker.value = true
      }
    }

    // H5选中子节点后保存
    const onFinish = ({ selectedOptions }) => {
      emit(
        'update:modelValue',
        selectedOptions.map((x) => x.value)
      )
      showPicker.value = false
    }

    return {
      showPicker,
      modelValueText,
      cascaderValue,
      fieldNames,
      onFinish,
      onShowPicker,
      ...field(props, emit)
    }
  }
}
</script>
